<script setup name="Login">
const ipc = require("electron").ipcRenderer;
const formData = reactive({
  username:'',
  password: '',
  isRead: false
})

const handleSubmit = () => {
  ipc.send('window-closed');
  ipc.send('window-new',{
    isMainWin: true,
    width: 1000,
    height: 800,
    minWidth:750,
    minHeight: 620,
    movable: true,
  })
}
</script>

<template>
  <div class="login-container">
    <window-bar title="登录" :max-visible="false"></window-bar>
    <div class="flex items-center justify-center w-full p-4 login-body">
      <a-form :model="formData" auto-label-width :label-col-props="{span: 0}" @submit="handleSubmit">
        <a-form-item field="username">
          <a-input v-model="formData.username" placeholder="please enter your username..." />
        </a-form-item>
        <a-form-item field="password">
          <a-input v-model="formData.password" placeholder="please enter your post..." />
        </a-form-item>
        <a-form-item field="isRead">
          <a-checkbox v-model="formData.isRead">
            I have read the manual
          </a-checkbox>
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
    
  </div>
</template>

<style lang="less" scoped>
.login-container{
  width: 100vw;
  height: 100vh;

  .login-body{
    height: calc(100vh - 38px);
    background-color: var(--color-bg-1);
  }
}
</style>